=<template>
  <div>
	<el-container style=" border: 1px solid #eee">
		<el-aside  width="200px" style="background-color: rgb(238, 241, 246)" >
		<!-- 左侧导航栏
		    el-aside中的属性 :default-openeds="['0']"  一级目录是否开始就展开   -->
	    <el-menu router>
		  <!--  一级菜单  -->
		  <el-submenu :index="index+''" v-for="(item,index) in $router.options.routes">
		  			  <!--  一级菜单的文字  -->
		    <template slot="title"><i class="el-icon-menu"></i>{{item.name}}</template>
			<!--  二级菜单  :index="items.path: 绑定的是点击跳转的路由-->
		       <el-menu-item :index="items.path" v-for="(items,index2) in item.children" 
			   :class="$route.path == items.path?'is-active':''" v-if="items.show == 'true'">
			     {{items.name}}
			   </el-menu-item>
		  </el-submenu>
	    </el-menu>
	
	  </el-aside>
	  
	  <el-container>
	    <el-header style="text-align: right; font-size: 12px">
	      <el-dropdown>
	        <i class="el-icon-setting" style="margin-right: 15px"></i>
	        <el-dropdown-menu slot="dropdown">
	          <el-dropdown-item>查看</el-dropdown-item>
	          <el-dropdown-item>新增</el-dropdown-item>
	          <el-dropdown-item>删除</el-dropdown-item>
	        </el-dropdown-menu>
	      </el-dropdown>
	    </el-header>
	    <!--  右侧显示主题  -->
	     <el-main>
	        <router-view></router-view>
	      </el-main>
	  </el-container>
	</el-container>
  </div>
</template>

<script>
  export default {
  
     
  }
</script>

<style>

   .el-header {
     background-color: #B3C0D1;
     color: #333;
     line-height: 60px;
   }
   
   .el-aside {
     color: #333;
   }
</style>